<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>MVVM</title>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<main>
	<section id="demos">
		<div class="row">
			<div class="large-12 columns">
				<h4 id="basic-demos-">Demo: index title</h4>
				<hr>
				<div class="demo-list">
					<div class="row">
						<div id='app' class="{{idClass}}" data-id="{{dataId}}">
							<h3 class="name {{toggleClass}}">姓名</h3>
							<p data-id="{{dataId}}" data-toggle="{{dataToggle}}">{{name}}</p>
							<h3 class="{{containerClass}}">年龄</h3>
							<p>{{age}}</p>
						</div>
						<div id="rating">
							<div class="side-bar {{showClass}}"></div>
							<div class="rating-content">
								<div class="rating-container {{containerClass}}">
									<div class="rating-name">{{name}}</div>
									<div class="rating-divider"></div>
									<div class="rating-desc">{{desc}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div id="demoWrap"></div>
</main>

<!-- Script Common *** JS -->
<script async src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script async src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<script type="module" src="../../../src/class/MVVM.js"></script>

<script type="module" data-toggle="previewCode" data-target="#demoWrap">
	import MVVM from '../../../src/class/MVVM.js';
	let vm = null;
	document.addEventListener('DOMContentLoaded', () => {
		let opt = {el: '#app', data:{name: 'steper kuo', age: 11, idClass: 'id-11111', dataId: '111111', dataToggle: 'string-111111', toggleClass: 'class-111111', containerClass: 'container-1111'}};
		vm = new MVVM(opt);

		setTimeout(() => {
			vm.data.age = 22;
			vm.data.idClass = 'id-222222';
			vm.data.dataId = 222222;
			vm.data.toggleClass = 'class-222222';
			vm.data.containerClass = 'container-222222';
			vm.data.dataToggle = 'string-2222222';
		}, 10000);

		let config = {el: '#rating', data: {name: 'name-11111', desc: 'desc-111111', showClass: 'show-rating', containerClass: 'container-11111'}};
		let ratingVM = new MVVM(config);

		setTimeout(() => {
			ratingVM.data.name = 'name-22222';
			ratingVM.data.desc = 'desc-22222';
		}, 3000);
	}, false);
</script>
</body>
</html>
